<template>
  <a-modal
    title="会员详细信息"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    :footer="null"
    @cancel="onClose"
    :visible="memberManagerInfoVisiable"
  >
    <!-- 表格区域 -->
    <a-table ref="TableInfo"
             :columns="columns"
             :rowKey="record => record.id"
             :dataSource="memberInfoData"
             :pagination="pagination"
             :loading="loading"
             @change="handleTableChange">
    </a-table>
  </a-modal>
</template>
<script>
import { mapState, mapMutations } from "vuex";

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 8 },
};
export default {
  name: "MemberManagerInfo",
  props: {
    memberManagerInfoVisiable: {
      require: true,
      default: false
    },
  },
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
      memberInfoData: [],
      memberId: null,
      filteredInfo: null,
      sortedInfo: null,
      paginationInfo: null,
      selectedRowKeys: [],
      loading: false,
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      }
    };
  },
  computed: {
    ...mapState({
      currentUser: (state) => state.account.user,
    }),
    columns () {
      let { sortedInfo, filteredInfo } = this
      sortedInfo = sortedInfo || {}
      filteredInfo = filteredInfo || {}
      return [{
        title: '会员ID',
        dataIndex: 'memberId',
        align: 'left'
      },{
        title: '用户类型',
        dataIndex: 'memberType',
        align: 'left',
        customRender: (text, row, index) => {
          if (text === "0") return '手机号';
          if (text === "1") return '微信OpenID';
          if (text === "2") return '支付宝UserID';
          if (text === "3") return '本行银行卡号';
          else return '';
        }
      }, {
        title: '用户',
        dataIndex: 'userId',
        align: 'left'
      }, {
        title: '是否该类型主账号',
        dataIndex: 'primaryAcctFlag',
        align: 'left',
        customRender: (text, row, index) => {
          if (text === "0") return '主账号';
          if (text === "1") return '非主账号';
          else return '';
        }
      }, {
        title: '获取方式',
        dataIndex: 'createType',
        align: 'left',
        customRender: (text, row, index) => {
          if (text === "0") return '关联整合';
          if (text === "1") return '微信交易';
          if (text === "2") return '支付宝交易';
          if (text === "3") return '银行卡交易';
          if (text === "4") return '手机号领取卡券';
          if (text === "5") return '线上支付';
          else return '';
        }
      },{
        title: '获取时间',
        dataIndex: 'createTime',
        align: 'left'
      }]
    },
    show: {
      get: function () {
        return this.memberManagerInfoVisiable
      },
      set: function () {
      }
    }
  },
  methods: {
    ...mapMutations({
      setUser: "account/setUser",
    }),
    resetMemberId(memberId) {
      this.memberId = memberId;
      return this.$refs.form && this.$refs.form.resetFields()
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    onClose() {
      this.loading = false;
      this.form.resetFields();
      this.$emit("close");
    },
    handleTableChange (pagination, filters, sorter) {
      // 将这三个参数赋值给Vue data，用于后续使用
      this.paginationInfo = pagination
      this.filteredInfo = filters
      this.sortedInfo = sorter

      this.fetch({
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...this.queryParams,
        ...filters
      })
    },
    fetch (params = {}) {
      // 显示loading
      this.loading = true
      if (this.paginationInfo) {
        // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
        this.$refs.TableInfo.pagination.current = this.paginationInfo.current
        this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
        params.pageSize = this.paginationInfo.pageSize
        params.pageNum = this.paginationInfo.current
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize
        params.pageNum = this.pagination.defaultCurrent
      }
      this.$get('/admin/market/memberManager/getMemberDetailList?memberId=' + this.memberId, {
        ...params
      }).then((r) => {
        let data = r.data
        const pagination = { ...this.pagination }
        pagination.total = data.total
        this.memberInfoData = data.rows
        this.pagination = pagination
        // 数据加载完毕，关闭loading
        this.loading = false
      })
    }
  },
  watch: {
    memberManagerInfoVisiable () {
      if (this.memberManagerInfoVisiable) {
        this.fetch()
      }
    }
  }
};
</script>
